import React, { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input,message as Massage } from 'antd';
import style from "./index.module.scss"
import Link from 'next/link';
import { useDispatch,useSelector } from 'react-redux';
import { useRouter } from 'next/dist/client/router';
import { getlogin } from '@/store/login';

const Login: React.FC = () => {
  let dispatch = useDispatch()
  let {token} = useSelector((state:any)=>state.login)
  let router = useRouter()
  const onFinish = async (values: any) => {
    if(!values.remember){
      return Massage.warning("请先阅读协议")
    }
  
    let obj = {
      username:values.username,
      password:values.password
    }
  
    //点击登录
    dispatch(getlogin(obj) as any)
  };
  let [timer , settimer] = useState(null as any)
  let cleas = () =>{
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      sessionStorage.removeItem("selectkey")
      settimer(null as any)
    }, 1000);
  }
  useEffect(()=>{
    cleas()
  },[])

  useEffect(()=>{
    if(token!=""){
      router.push("/")
    }
  },[token])
  useEffect(()=>{
    localStorage
    let str = localStorage.getItem("token")
    if(str){
      router.push("/")
    }
  })

  const onFinishFailed = (errorInfo: any) => {
   
    //输入框为空时提示消息
    errorInfo.errorFields.map((item:any)=>{
      Massage.warning(item.errors)
    })  
  };
  


  return (
    <div className={style.login_box}>
      <div className={style.mark}>
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 18 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        > 
          <Form.Item>
            <span className={style.login_title}>登录</span>
          </Form.Item>
          <Form.Item
            label="账号"
            name="username"
            rules={[{ required: true, message: '请输入你的名字' }]}
          >
            <Input />
          </Form.Item>
  
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入你的密码' }]}
          >
            <Input.Password  autoComplete='off' />
          </Form.Item>
  
          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 6, span: 17 }}>
            <Checkbox> <span>《假装是个协议》</span> </Checkbox>
          </Form.Item>
  
          <Form.Item wrapperCol={{ offset: 4, span: 18 }}>
            <div className={style.loginbtn}>
            <Button type="primary" block  htmlType="submit">
              登录
            </Button>
            <Button type="link">
             <Link href="/sign">去注册</Link>
            </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
};

export default Login;